import React from 'react';
import Item from "./Item";
import Dot from "./Dot";
import "./index.css";
export default class Progress extends React.Component {
    state = {
        flag: false, 
        sX: 0,
        sY: 0,
        proWidth: 500,
        mX: -10
    }
    componentDidMount() {
        // setInterval(() => {
        //     var {mX} = this.state;
        //     mX += .01;
        //     this.setState({
        //         mX
        //     });
        // }, 1);
    }
    mouseMove(e) {
        if (this.state.flag) {
            var { sX } = this.state;
            var { clientX } = e;
            var mX = clientX - sX;
            if (mX > this.state.proWidth - 10) {
                mX = this.state.proWidth - 10;
            } else if (mX <= 0) {
                mX = -10;
            }
            this.setState({
                mX
            });
        }
    }  
    mouseStart(e) {
        var { clientX } = e; 
        var dx = parseInt(this.getStyle(e.target, 'left')); 
        this.setState({
            flag: true, 
            sX: clientX - dx
        });
        document.addEventListener('mousemove', this.mouseMove.bind(this), false);
        document.addEventListener('mouseup', this.mouseUp.bind(this), false);
    }
    mouseUp(e) {
        this.setState({
            flag: false, 
        });
        document.removeEventListener("mousemove", this.mouseMove.bind(this), false);
        document.removeEventListener("mouseup", this.mouseUp.bind(this), false);
    }
    proBar(e) {
        if (this.state.flag) {
            console.log("?????????")
            var { left } = e.target.getBoundingClientRect();
            var sx = e.clientX - left - 10;
            this.setState({
                mX: sx,
                flag:false
            });
        }
    }
    getStyle(elem, prop) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(elem, null)[prop];
        } else {
            return elem.currentStyle[prop];
        }
    }
    render() {
        var { proWidth, mX } = this.state;
        return <div className="progress_container" style={{ width: proWidth + 'px' }}>
            <div className="pro_wrap" style={{ width: proWidth + 'px' }} onClick={(e) => this.proBar(e)}>
                <Item w={mX} onItem={this.proBar.bind(this)} />
                <Dot mouseDown={this.mouseStart.bind(this)} move={mX} />
            </div>
        </div>

    }
}